<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%String path = request.getContextPath() ;%>
<%@ taglib uri="/WEB-INF/tld/c.tld" prefix="c" %> 
<%@ taglib uri="/WEB-INF/tld/ui.tld" prefix="ui" %> 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="renderer" content="webkit">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>查看资料</title>
<jsp:include page="../import.jsp" flush="true" />
<script src="<%=path %>/resource/lib/plugins/iviewer/sq_iviewer.js" type="text/javascript"></script>
</head>
<body>
    <div id="iviewer">
        <div class="loader"></div>
        <div class="viewer"></div>
        <ul class="controls">
            <li class="title"></li>
            <li class="zoomin"><span class="sqiconfont">&#xe63e;</span></li>
            <li class="zoomout"><span class="sqiconfont">&#xe63d;</span></li>
            <li class="rotate_left"><span class="sqiconfont">&#xe65f;</span></li>
            <li class="rotate_right"><span class="sqiconfont">&#xe65e;</span></li>
        </ul>
    </div>

<style type="text/css">
* {
    margin: 0;
    padding: 0;
}
#iviewer {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #111;
    display: none;
    z-index: 1;
}
#iviewer .controls {
    display: none;
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    background: rgba(255,255,255, .5);
    text-align: right;
}
#iviewer:hover .controls{
    display: block;
}
#iviewer .controls li {
    position: relative;
    width: 40px;
    height: 40px;
    line-height: 40px;
    background-repeat: no-repeat;
    background-position: center center;
    display: inline-block;
    cursor: pointer;
    z-index: 3;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#iviewer .controls li:hover {
    cursor: pointer;
}
#iviewer .controls li.title{
    float: left;
    width: auto;
    font-size: 14px;
    font-weight: bold;
}
#iviewer .controls li .sqiconfont{
    vertical-align: middle;
    font-size: 24px;
}

#iviewer .info {
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: #ccc;
    font-size: 16px;
    padding: 0;
}
#iviewer .viewer {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    display: none;
}
/*#iviewer .loader {
    position: fixed;
    width: 100%;
    height: 100%;
    background: url('img/spinner.gif') no-repeat center center;
    z-index: 2;
}*/
</style>
<script type="text/javascript">
(function($) {
    var WIN_imgSrc = window.opener.__ImgSrc,
        WIN_imgTit = window.opener.__ImgTit;
    function init() {
        var viewer = $("#iviewer .viewer").
            width($(window).width()).
            height($(window).height()).
            iviewer({
                ui_disabled : true,
                zoom : 'fit',
                zoom_min: 10,
                onFinishLoad : function(ev) {
                    $("#iviewer .loader").fadeOut();
                    $("#iviewer .viewer").fadeIn();
                }
            }
        );

        $("#iviewer .zoomin").click(function(e) {
            e.preventDefault();
            viewer.iviewer('zoom_by', 1);
        });
        $("#iviewer .zoomout").click(function(e) {
            e.preventDefault();
            viewer.iviewer('zoom_by', -1);
        });
        $("#iviewer .rotate_left").click(function(e) {
            e.preventDefault();
            viewer.iviewer('angle', -90);
        });
        $("#iviewer .rotate_right").click(function(e) {
            e.preventDefault();
            viewer.iviewer('angle', 90);
        });
        open(WIN_imgSrc);
    }

    function open(src) {
        $("#iviewer").fadeIn().trigger('fadein');
        $("#iviewer .loader").show();
        $("#iviewer .viewer").hide();

        var viewer = $("#iviewer .viewer")
            .iviewer('loadImage', src)
            .iviewer('set_zoom', 'fit');
        $('#iviewer .controls .title').text(WIN_imgTit);
    }

    $('.go').click(function(e) {
        e.preventDefault();
        var src = $(this).attr('href');
        open(src);
    });

    $("#iviewer").bind('fadein', function() {
        $(window).keydown(function(e) {
            if (e.which == 27) close();
        });
        $(window).resize(function(event) {
            var viewer = $("#iviewer .viewer").
                width($(window).width()).
                height($(window).height()).
                iviewer('loadImage', WIN_imgSrc).
                iviewer('set_zoom', 'fit');
        });
    });

    init();
})(jQuery);
</script>
</body>
</html>